たかがボタン、されどボタン ~button要素から深ぼるボタンUIの定義について~
「できそうな気がする」
境やモノが人や動物に対して「与える(afford)」意味や価値、行動の可能性のこと
ものをどう使うか、使えるかのヒント
ボタンの有効/無効、アイコンで何ができるかを表す
実態に寄せたようなデザイン
情報量が多い
ボタンとしての視認性はちょっと落ちている
フラットデザインの影響
aタグでボタンを作ることがある
ざんねんなボタン実装集
type属性を忘れた<button>
form内に書いたbuttonにtypeつけずにsubmitされた
linterでbuttonのtypeを必須化して気づける
<a>で実装されたUIボタン
使い分ける基準:振る舞い
ボタン:アクション
スペースキー、エンターキー
リンク:ナビゲーション
エンターキーのみ
<div>で実装されたUIボタン
div:意味を持たない名前のない役割
HTMLの役割は支援技術に伝わる
名前、役割、値がある
role属性で読み上げはされるが、キーボード操作はされない
ガイドラインから学ぶ鉄則
セマンティクスと振る舞いがあるならネイティブ要素を使おう
悪いARIAより、ARIAを使わないほうがマシ